<template>
	<view class="user-contacts">
		<view class="contacts-wrap">
			<van-tabs :ifbuy="true" :active="active" color="#d8002a" @change="onChangeTab">
			 <view class="timeFiltrate">
				  <view class="btn" :class="{'active': tabDate[active].btnActive}" @tap="onAll">全部</view>
				  <view>
                    <picker mode="date" :value="tabDate[active].date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="timeFiltrate-date" :class="{'active': !tabDate[active].btnActive}">
							<view class="date">{{tabDate[active].date === tabDate[active].datec ? '今日': tabDate[active].date}}</view>
							<view class="iconfont iconxiala1"></view>
						</view>
                    </picker>
                </view>
			  </view>
			  <van-tab title="投入LAB"><book-red ref="red" :activered="active" :redPdate="tabDate[active].date"></book-red></van-tab>
			  <van-tab title="产出LAB"><book-blue ref="blue" :activeblue="active" :bluePdate="tabDate[active].date"></book-blue></van-tab>
			</van-tabs>
		</view>
	</view>
</template>

<script>
import BookRed from './lab-red.vue'
import BookBlue from './lab-blue.vue'
export default {
	components: {
		BookRed,
		BookBlue
	},
	data() {
		const currentDate = this.getDate({
            format: true
        })
		return {
			active: 0,
			btnActive: true,
			lastActive: 0,
			scrollTop: {
				top1: 0,
				top2: 0,
				top3: 0,
				top4: 0
			},
			tabDate: [{
				date: '今日',
				datec: currentDate,
				btnActive: true
			},{
				date: '今日',
				datec: currentDate,
				btnActive: true
			}]
		};
	},
	onLoad (key) {
		this.active = Number(key.type)|| 0
	},
	computed: {
        startDate() {
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        }
    },
	methods: {
		onChangeTab (e) {
			this.lastActive = this.active
			this.active = e.detail.index;
			uni.createSelectorQuery().selectViewport().scrollOffset(res => {
			  this.scrollTop['top'+this.lastActive] = res.scrollTop
			}).exec();
			uni.pageScrollTo({
				scrollTop: this.scrollTop['top'+this.active],
				duration: 0
			})
		},
		onAll () {
			this.tabDate[this.active].date = '今日'
			this.tabDate[this.active].btnActive = true
			if (this.active) {
				this.$refs.blue.getLABbuleOutput('')
			} else {
				this.$refs.red.getLABredInvest('')
			}
		},
		bindDateChange(e) {
			this.tabDate[this.active].date = e.target.value
			this.tabDate[this.active].btnActive = false
			if (this.active) {
				this.$refs.blue.getLABbuleOutput(e.target.value)
			} else {
				this.$refs.red.getLABredInvest(e.target.value)
			}
        },
		getDate(type) {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (type === 'start') {
                year = year - 60;
            } else if (type === 'end') {
                year = year;
            }
            month = month > 9 ? month : '0' + month;;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        }
	}
};
</script>

<style scoped lang="scss">
	.timeFiltrate {
		position: fixed;
		top: 44px;
		left: 0;
		right: 0;
		z-index: 8;
		display: flex;
		padding: 20upx 30upx;
		background-color: #fafbfc;
		.btn {
			padding: 5upx 15upx;
			line-height: 1;
			margin-right: 30upx;
			color: #4c4c4c;
			border: 1px solid #f1f1f1;
			border-radius: 4px;
			background-color: #f1f1f1;
			color: #666;
			&.active {
				color: #fff;
				background-color: #f4544d;
			}
		}
		&-date{
			display: flex;
			align-items: center;
			color: #666;
			&.active{
				color: #f4544d;
			}
			.date {
				margin-right: 10upx;
			}
			.iconfont {
				font-size: 36upx;
			}
		}
	}
</style>
